<div class="crayons-card p-6" data-controller="image-upload" data-image-upload-url-value="<%= image_uploads_path %>">
  <h2 class="crayons-subtitle-1 mb-4">Upload an Image</h2>
  <p class="mb-6">Quickly upload an image.</p>
<%# Multipart, remote forms are tricky, the data is actually sent in the Stimulus controller. %>
  <%= form_with(url: image_uploads_path, multipart: true) do |f| %>

    <div class="crayons-field">
      <%= label_tag :image, "Image:", class: "crayons-field__label" %>
      <%= f.file_field :image, required: true, accept: "image/*", data: { "image-upload-target": "fileField" } %>
    </div>
    <%= f.submit "Upload", class: "crayons-btn mt-4", data: { action: "image-upload#onFormSubmit" } %>
  <% end %>

  <div class="mt-4 hidden" data-image-upload-target="imageResult">
  </div>
</div>
